<template>
    <div class="register-wrap">
        <div class="ms-register">
            <div class="ms-title">武术比赛管理系统-注册</div>
            <el-form :model="ruleForm" :rules="rules" label-width="78px" ref="register" 
                class="ms-content" status-icon>
                <el-form-item prop="username" label="用户名">
                    <el-input v-model="ruleForm.username" placeholder="请输入用户名" clearable>
                        <template #prepend>
                            <el-button icon="el-icon-user"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码" class="form-item">
                    <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password"
                        show-password clearable>
                        <template #prepend>
                            <el-button icon="el-icon-lock"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="checkPass" label="确认密码" class="form-item">
                    <el-input v-model="ruleForm.checkPass" placeholder="请输入密码" type="password" 
                        show-password autocomplete="off" clearable>
                        <template #prepend>
                            <el-button icon="el-icon-lock"></el-button>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="phone" label="手机号" class="form-item">
                    <el-input type="phone" placeholder="请输入手机号" v-model="ruleForm.phone">
                        <template #prepend>
                            <el-button icon="el-icon-phone"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <div class="register-btn" style="margin-top: 40px;">
                    <el-button type="primary" @click="toLogin()">登录</el-button>
                    <el-button type="warning" @click="submitForm()">注册</el-button>
                </div>
                
            </el-form>
        </div>
    </div>
</template>

<script>
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import secret from "../utils/secret";

export default {
    setup() {
        const router = useRouter();
        const store = useStore();
        store.commit("clearTags");


        const ruleForm = reactive({
            username: "ldx",//用户名
            password: "123456ab",//密码
            phone:'13512345678',//手机号
            checkPass: "123456ab",//确认密码
        });
        const showVerification = ref(false);
        const rules = {
            username: [
                {
                    required: true,
                    message: "请输入用户名",
                    trigger: "blur",
                },
            ],
            password: [
                { required: true, message: "请输入密码", trigger: "blur" },
                { pattern:/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,message:'长度至少为8，至少含有一个字母和一个数字'}
            ],
            checkPass:[
                {required:true,message:'请输入确认密码',trigger:'blur'},
                {validator: (rule, value, callback) => {
                    if (value === ruleForm.password) {
                        callback();
                    } else {
                        callback(new Error("两次输入密码不一致"));
                    }
                }, trigger: "blur" }
            ],
            phone:[
                {required:true,message:'手机号不能为空'},
                {pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                    message:'不符合手机规则'}
            ]
        };

        const register = ref(null);
        const submitForm = () => {
            register.value.validate((valid) => {
                if (valid) {
                    store.dispatch("Register", {
                            userName: ruleForm.username,
                            password: secret.Encrypt(ruleForm.password),
                            phoneNum: ruleForm.phone,
                        }
                    ).then(res => {
                        if (res.code === 200) {
                            ElMessage({
                                message: "注册成功",
                                type: "success",
                                center: true,
                                duration: 1500,
                                onClose: () => {
                                    router.push("/login");
                                },
                            });
                        } else {
                            ElMessage({
                                type: "error",
                                message: res.message,
                                center: true,
                            });
                        }
                    }).catch(err=>{
                        console.log("注册异常",err);
                    });
                    
                } else {
                    ElMessageBox({
                        title: "提示",
                        message: "请检查表单填写是否规范",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        center:true
                    })
                }
            });
        };

        const toLogin = () => {
            router.push("/login");
        };

        

        return {
            ruleForm,
            showVerification,
            rules,
            register,
            submitForm,
            toLogin,
        };
    },
};
</script>

<style scoped>
.register-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../assets/img/background.jpeg);
    background-size: 100%;
    opacity: 0.7;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: black;
    border-bottom: 1px solid #ddd;
}
.ms-register {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    color: black
}
.ms-content {
    padding: 30px 30px;
}

.form-item{
    margin-top: 40px;
    color: black;
}

.register-btn {
    text-align: center;
    display: flex;
}
.register-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}

</style>